<!--顶部条-->
<template>
  <div style="margin: 0;padding: 0;width: 100%;height: 100%;">

    <el-menu
        class="top_menu"
        mode="horizontal"
        @select="handlSelect"
        active-text-color="#4B89DA"
        text-color="#ffffff"
        background-color="#703CF6"
        router
    >

      <div class="flex-grow"/>
      <el-menu-item index="/TradeCenter"><span>首页</span></el-menu-item>

      <!--  <el-menu-item index="/TradeCenter">交易中心</el-menu-item>-->
      <el-menu-item index="/userCenter"><span>个人中心</span></el-menu-item>

      <el-menu-item index="/verificateOnChain"><span>链上核验</span></el-menu-item>

      <el-menu-item index="/inside"><span>充值中心</span></el-menu-item>


      <div class="t-m-avatar-div" style="position:absolute;right: 10%;" v-if="isLogged"
           @click="$router.push('/userCenter')">

        <el-card class="t-m-avatar-card"
                 @mouseenter="avatar_hovered=true"
                 @mouseleave="avatar_hovered=false"
                 style="width: 50px;height: 50px;padding:0;margin: 0;border-radius: 50%;border: none">
          <img class="t-m-avatar" src="@/assets/logo-small.png" alt="" style="cursor: pointer">
        </el-card>

        <div :class="[avatar_hovered?'t-m-avatar-detail':'t-m-avatar-nonHover']" :id="avatar_hovered?'visible':'invisible'">

          <div class="t-m-avatar-detail-row">
            <span style="font-size: 22px;font-weight: 800">{{ userInfo.username }}</span>
            <img style="margin-left: 10px;bottom: -6%" src="@/assets/31-check.svg" v-if="userInfo.isCertified===1"
                 alt="">
          </div>

          <div class="t-m-avatar-detail-row" style="margin-top: 10px">
            <img src="@/assets/58-call-phone-grey.svg" alt="" style="margin-right: 15px">
            <span>{{ userInfo.phone }}</span>
          </div>

          <div class="t-m-avatar-detail-row">
            <img src="@/assets/59-email.svg" alt="" style="margin-right: 15px">
            <span>{{ userInfo.email }}</span>
          </div>

          <div class="t-m-avatar-detail-row">
            <img src="@/assets/identifier.svg" alt="" style="margin-right: 15px">
            <span>{{ userInfo.citizenId }}</span>
          </div>

          <div class="t-m-avatar-detail-row">
            <div
                style="margin: 10px 10px;width: 80%;height: 1px;background: #dddddd;position: absolute;z-index: -1"></div>
            <div
                style="background-color: white;width: 45px;display:flex;flex-direction: column;justify-content: center;align-items: center">
              <img src="@/assets/48-favorite-heart.svg" alt="">
            </div>
          </div>

          <div class="t-m-avatar-detail-row">
            <div class="t-m-tag-div" v-if="userInfo.tag1!==null">
              <span
                  style="align-content: center;font-size: 20px;color: white;font-weight: 600">
                {{ userInfo.tag1 }}</span>
            </div>
          </div>

          <div class="t-m-avatar-detail-row">
            <div class="t-m-tag-div" v-if="userInfo.tag2!==null">
              <span
                  style="align-content: center;font-size: 20px;color: white;font-weight: 600">{{ userInfo.tag2 }}</span>
            </div>
          </div>

          <div class="t-m-avatar-detail-row">
            <div class="t-m-tag-div" v-if="userInfo.tag3!==null">
              <span
                  style="align-content: center;font-size: 20px;color: white;font-weight: 600">{{ userInfo.tag3 }}</span>
            </div>
          </div>

        </div>
      </div>

      <el-menu-item index="/main" v-if="isLogged" style="position:relative;left: 62%" class="bt_login_out_align_right"> <!--TODO-->
        <div>
          <button class="c-button c-button--gooey"> 退出
            <div class="c-button__blobs">
              <div></div>
              <div></div>
              <div></div>
            </div>
          </button>
          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: block; height: 0; width: 0;">
            <defs>
              <filter id="goo">
                <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
                               result="goo"></feColorMatrix>
                <feBlend in="SourceGraphic" in2="goo"></feBlend>
              </filter>
            </defs>
          </svg>
        </div>
      </el-menu-item>

      <el-menu-item index="/login" v-if="!isLogged" style="position:relative;left: 62%" class="bt_login_out_align_right">
        <!--TODO-->
        <div>
          <button class="c-button c-button--gooey"> 登录/注册
            <div class="c-button__blobs">
              <div></div>
              <div></div>
              <div></div>
            </div>
          </button>
          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: block; height: 0; width: 0;">
            <defs>
              <filter id="goo">
                <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
                               result="goo"></feColorMatrix>
                <feBlend in="SourceGraphic" in2="goo"></feBlend>
              </filter>
            </defs>
          </svg>
        </div>
      </el-menu-item>

      <!--      <img src="@/assets/topLogo.jpg" class="top-logo" alt=""/>-->

    </el-menu>

  </div>

</template>
<script>
export default {
  name: "top-menu",
  data() {
    return {
      avatar_hovered: false,
    }
  },
  computed: {
    isLogged() {
      return JSON.parse(sessionStorage.getItem('userObj')).id !== 11
    },
    userInfo() {
      return JSON.parse(sessionStorage.getItem('userObj'));
    }
  }
}
</script>

<style>
.flex-grow {
  flex-grow: 0.05;
}

.flex-grow2 {
  flex-grow: 0.8;
}

/*TODO*/
.top_menu span {
  color: white;
}

.top_menu {
  padding: 0;
  margin: 0;
  height: 100%;
  /*font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;*/
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 2px;
  background-color: #703CF6;
  /*background-color: rgba(255, 255, 255, 0.8);*/
  border: none;
  z-index: 50;
}

.top-logo {
  position: relative;
  left: 30%;
  top: 13%;
  border-radius: 10px;
  width: 40px;
  height: 40px
}

.seat {
  margin-left: 0px;
}

/*登录按钮样式*/
.bt_login_out_align_right {
  position: relative;
}

.c-button {
  color: #000;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  padding: 0.3em 1.0em;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 1;
}

.c-button--gooey {
  color: #703CF6;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: 4px solid #703CF6;
  border-radius: 0;
  position: relative;
  transition: all 700ms ease;
}

.c-button--gooey .c-button__blobs {
  height: 100%;
  /*filter: url(#goo);*/
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: -3px;
  right: -1px;
  z-index: -1;
}

.c-button--gooey .c-button__blobs div {
  background-color: #703CF6;
  width: 34%;
  height: 100%;
  border-radius: 100%;
  position: absolute;
  transform: scale(1.4) translateY(125%) translateZ(0);
  transition: all 700ms ease;
}

.c-button--gooey .c-button__blobs div:nth-child(1) {
  left: -5%;
}

.c-button--gooey .c-button__blobs div:nth-child(2) {
  left: 30%;
  transition-delay: 60ms;
}

.c-button--gooey .c-button__blobs div:nth-child(3) {
  left: 66%;
  transition-delay: 25ms;
}

.c-button--gooey:hover {
  color: #fff;
}

.c-button--gooey:hover .c-button__blobs div {
  transform: scale(1.4) translateY(0) translateZ(0);
}


.t-m-avatar-div {
  border-radius: 50%;
  width: 50px;
  height: 100%;
  position: relative;
}

.t-m-avatar {
  border: 2px solid rgb(255, 255, 255);
  border-radius: 50%;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  vertical-align: middle;
}

.t-m-avatar-detail {
  padding-top: 30px;
  width: 280px;
  height: 420px;
  z-index: 99;
  background-color: white;
  position: relative;
  top: 50%;
  left: -240%;
  border-radius: 15px;
  font-weight: 600;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  transition: 0.3s;
}

#invisible {
  opacity: 0;
}

#visible {
  opacity: 1;
}

.t-m-avatar-detail span {
  color: #545454;
  display: inline-block;
}

.t-m-avatar-detail img {
  display: inline-block;
  width: 28px;
  height: 28px;
  position: relative;
  bottom: 10%;
}

.t-m-avatar-detail-row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-bottom: 10px;
}

.t-m-tag-div {
  width: 180px;
  height: 54px;
  background-color: #703CF6;
  transition: 0.3s;
  box-shadow: 0px 0px 10px 0px #703CF6;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.t-m-avatar-card {
  /*卡片拾起效果*/
  position: relative;
  top: 6%;
  transform-style: preserve-3d;
  perspective: 900px;
  transform: rotateY(0deg);
  vertical-align: center;
  z-index: 100;
  /*  border-radius: 5px;
    border: white 5px solid;*/
}

.t-m-avatar-card:hover {
  transform: rotateY(0deg) scale(1.8) translateY(20px);
  z-index: 200;
  /*  box-shadow: 0 25px 40px rgba(0, 0, 0, 0);*/
}

el-menu-item:hover {
  background-color: transparent;
  box-shadow: none;
}
.t-m-avatar-nonHover{
  top: 900px;
  position: absolute;
}
/*.t-m-item-div{
  width:100%;
  height: 100%;

}

.t-m-item-div:hover {
  color: #703CF6;
  background-color: white;
  border-radius: 20px;
}*/

</style>
